<template>
  <el-card>
    <div slot="header">
      <h3>修改架构信息-表单查看页面</h3>
    </div>
    <div>
      <!-- 按钮操作栏 -->
      <BtnRender :render="renderBtnsBar" />
      <!-- 发起原因输入框 -->
      <LaunchReasonInput
        :reason.sync="launchReason"
        :isDisabled="true"
      />
      <!-- 表格 -->
      <el-row>
        <SkusTable
          showActionCol
          :loading="tableInfo.loading"
          :data-source="tableInfo.list"
          :columns="tableInfo.columns"
          :actionRender="renderTableBtnAction"
        />
      </el-row>
      <!-- 表尾字段 -->
      <FooterFields :footerFields="footerFields" />
    </div>
  </el-card>
</template>
<script>
import LaunchReasonInput from '@/components/LaunchReasonInput';
import SkusTable from '@/components/skusTable';
import FooterFields from '@/pages/commodity/components/FooterFields';
import { tableColumnsView } from './constants';
import { getFooterFieldsService } from '@/api/commodity/common';
import { requestToData, requestToExport } from '@/api/commonHttp';
import { createExcelByExport } from '@/utils/bizUtils';
import { getBtnsBar } from '@/utils/getBtnsRender';
import BtnRender from '@/components/JSXRender/BtnRender';

export default {
  components: {
    BtnRender,
    LaunchReasonInput,
    SkusTable,
    FooterFields
  },
  data () {
    return {
      btnLoading: {
        export: false, // 导出
      },
      btnDisabled:{
        export: true,
      },
      launchReason: '', // 发起原因
      tableInfo: {
        list: [],
        columns: tableColumnsView,
        loading: false
      },
      footerFields: {}, // 表尾字段
      skuSpec: {
        list: [], // row => SPU下SKU规格列表
        loading: false
      },
      recordNo: '', // 单据号
    }
  },
  mounted () {
    this.loadInitDataInMounted();
  },
  methods: {
    // jsx-render渲染按钮操作栏
    renderBtnsBar (h) {
      const btnsBar = [
        { label: '导出', method: this.handleExport, loading: this.btnLoading.export, size: 'large', disabled: this.btnDisabled.export },
      ]
      return getBtnsBar(h, btnsBar, this.showBtn);
    },
    // 导出
    handleExport () {
      this.exportSchemaInfo();
    },
    // 导出架构信息
    async exportSchemaInfo () {
      const res = await requestToExport({
        url: '/sysback/product/update/record/exportRecordStructure?recordNo=' + this.recordNo,
        type: 'post',
      }, () => { this.btnLoading.export = true; }, () => { this.btnLoading.export = false; });
      createExcelByExport({ res, excelTitle: '修改架构信息' });
    },
    // jsx-render渲染表格操作栏
    renderTableBtnAction (h, { row }) {
      const viewSpecBtn = <el-popover
        placement="right"
        trigger="click"
      >
        <el-table data={this.skuSpec.list} height={300} v-loading={this.skuSpec.loading}>
          <el-table-column minWidth="150" property="specDetailStr" label="规格" />
          <el-table-column minWidth="150" property="skuNo" label="SKU编码" />
        </el-table>
        <el-button slot="reference" type="text" onClick={() => { this.handleViewSpec(row) }}>查看规格</el-button>
        <span slot="reference">{row.skuList ? row.skuList[0]?.specDetailStr : '' }</span>
      </el-popover>
      return <div class="table-action">{ viewSpecBtn }</div>;
    },
    // 在mounted时期加载初始数据
    loadInitDataInMounted () {
      const { recordNo } = this.$route.query;
      if (recordNo) {
        this.getTableDataByRecordNo(recordNo);
        this.getFieldsInfo(recordNo);
      }
    },
    // 返回
    handleGoBack () {
      this.$router.push({ name: 'chageFromManageList' });
    },
    // 查看规格
    handleViewSpec (row) {
      this.getSkuSpecListBySpu(row.uuid);
    },
    // 获取SPU下的SKU的规格列表
    async getSkuSpecListBySpu (productUuid) {
      const retData = await requestToData({
        url: `/sysback/update/product/structure/getProductSkuList?productUuid=${productUuid}`,
        type: 'get',
      }, () => { this.skuSpec.loading = true; }, () => { this.skuSpec.loading = false; });
      this.skuSpec.list = retData;
    },
    // 获取表格数据 by 单据号
    async getTableDataByRecordNo (recordNo) {
      const retData = await requestToData({
        url: `/sysback/product/update/record/queryRecordStructure?recordNo=${recordNo}`,
        type: 'post'
      }, () => { this.tableInfo.loading = true; }, () => { this.tableInfo.loading = false; });
      this.tableInfo.list = retData || [];
    },
    // 获取字段信息
    async getFieldsInfo (recordNo) {
      const retData = await getFooterFieldsService({ recordNo }, '.footer_fields_card');
      if (retData) {
        // 审核状态为审核中、审核通过 可导出
        if (retData.commitState =='OK' || retData.commitState =='COMMIT') {
            this.btnDisabled.export = false;
        }
        this.launchReason = retData.launchReason;
        this.footerFields = retData;
        this.recordNo = recordNo;
      }
    }
  }
}
</script>
